<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button @click="delEmps">删除</button>
    <table>
        <tr>
            <th>选择</th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>工资</th>
            <th>状态</th>
            <th>备注</th>
            <th>操作</th>
        </tr>

        <tr v-for="emp in empList">
            <td><input type="checkbox" :value="emp.e_id" v-model="eids" /></td>
            <td>{{emp.e_id}}</td>
            <td>{{emp.e_name}}</td>
            <td>{{emp.e_sex}}</td>
            <td>{{emp.e_birth}}</td>
            <td>{{emp.e_sal}}</td>
            <td>{{emp.statusName}}</td>
            <td>{{emp.e_remark}}</td>
            <td><a href="#" @click.prevent="deleteEmp(emp.e_id)" >删除</a></td>
        </tr>
    </table>

</div>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>

  let vm = new Vue({
      el:'#app',
      data:{
        empList:[],
        eids:[],
      },
      methods:{

          getEmpList(){
              //发送ajax请求，从服务器获取员工数据给属性empList赋值
              //这里发送ajax请求使用axios（ajax的一个js封装组件）
              axios
                  .get('emp')
                  .then(response => {
                      this.empList=response.data;
                      /*console.log(response.data);
                      console.log(response.status);
                      console.log(response.statusText);
                      console.log(response.headers);
                      console.log(response.config);*/
                  })
          },

          deleteEmp(e_id){


              axios.delete(`emp/${e_id}`)
                    .then(response => {
                        let result =response.data;
                        if(result.success){
                            this.getEmpList();
                            alert(result.message);
                        }else{
                            alert(result.message);
                        }
                    });
          },

          delEmps(){
              axios.delete(`emp`,{data:this.eids})
                  .then(response => {
                      let result =response.data;
                      if(result.success){
                          this.getEmpList();
                          alert(result.message);
                      }else{
                          alert(result.message);
                      }
                  });
          }

      },
      mounted(){//vue渲染完成后执行此方法

          this.getEmpList();

      }
  });



</script>
</body>
</html>